<template>
    <div class="CourseContentStudentView">
        <div class="studentInfoContainer">
            <!-- 顶部信息卡片 -->
            <div class="infoCard">
                <div class="basicInfo">
                    <div class="avatar">
                        <img :src="currentStudent.avatar" alt="学生头像">
                    </div>
                    <div class="info">
                        <h2 class="name">{{ currentStudent.userName }}</h2>
                        <p class="introduce">{{ currentStudent.introduce }}</p>
                        <div class="tags">
                            <span class="tag">{{ currentStudent.className }}</span>
                            <span class="tag">ID：{{ currentStudent.UserId }}</span>
                        </div>
                    </div>
                </div>
                <div class="statistics">
                    <div class="statItem">
                        <div class="value">{{ currentStudent.completionRate }}%</div>
                        <div class="label">课程完成度</div>
                    </div>
                    <div class="statItem">
                        <div class="value">{{ currentStudent.averageScore }}</div>
                        <div class="label">平均成绩</div>
                    </div>
                    <div class="statItem">
                        <div class="value">{{ currentStudent.totalTime }}h</div>
                        <div class="label">总学习时长</div>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="contentSection">
                <!-- 章节完成情况 -->
                <div class="chapterSection section-card">
                    <div class="section-header">
                        <h3 class="sectionTitle">章节完成情况</h3>
                        <div class="section-extra">
                            共 {{ currentStudent.chapterProgress.length }} 个章节
                        </div>
                    </div>
                    <div class="chapter-list">
                        <div v-for="chapter in paginatedChapters" 
                             :key="chapter.id" 
                             class="chapter-item">
                            <div class="chapter-header">
                                <span class="chapter-name">{{ chapter.name }}</span>
                                <span class="chapter-status" :class="chapter.status">
                                    {{ chapter.statusText }}
                                </span>
                            </div>
                            <div class="progress-wrapper">
                                <div class="progress-bar">
                                    <div class="progress" :style="{ width: chapter.progress + '%' }"></div>
                                </div>
                                <span class="progress-text">{{ chapter.progress }}%</span>
                            </div>
                            <div class="chapter-footer">
                                <span class="study-time">学习时长：{{ chapter.studyTime }}h</span>
                                <span class="last-study">最后学习：{{ chapter.lastStudyTime }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination
                            v-model:currentPage="chapterPage"
                            :page-size="chapterPageSize"
                            :total="currentStudent.chapterProgress.length"
                            layout="prev, pager, next"
                            @current-change="handleChapterPageChange"
                        />
                    </div>
                </div>

                <!-- 习题完成情况 -->
                <div class="exerciseSection section-card">
                    <div class="section-header">
                        <h3 class="sectionTitle">习题完成情况</h3>
                        <div class="section-extra">
                            共 {{ currentStudent.exerciseProgress.length }} 套习题
                        </div>
                    </div>
                    <div class="exercise-list">
                        <div v-for="exercise in paginatedExercises" 
                             :key="exercise.id" 
                             class="exercise-item">
                            <div class="exercise-header">
                                <span class="exercise-name">{{ exercise.name }}</span>
                                <span class="exercise-score" :class="getScoreLevel(exercise.score)">
                                    {{ exercise.score }}分
                                </span>
                            </div>
                            <div class="exercise-stats">
                                <div class="stat-item">
                                    <span class="stat-label">完成题数</span>
                                    <span class="stat-value">{{ exercise.completed }}/{{ exercise.total }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">正确率</span>
                                    <span class="stat-value" :class="getAccuracyLevel(exercise.accuracy)">
                                        {{ exercise.accuracy }}%
                                    </span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">用时</span>
                                    <span class="stat-value">{{ exercise.timeSpent }}分钟</span>
                                </div>
                            </div>
                            <div class="exercise-footer">
                                <span class="submit-time">提交时间：{{ exercise.submitTime }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination
                            v-model:currentPage="exercisePage"
                            :page-size="exercisePageSize"
                            :total="currentStudent.exerciseProgress.length"
                            layout="prev, pager, next"
                            @current-change="handleExercisePageChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name: 'CourseContentStudentView'
}
</script>

<script setup lang="ts">
    const route = useRoute();
    const UserId = ref(null);
    
    watch(() => route.query.UserId, async (newvValue) => {
        UserId.value = newvValue;
    },
    { immediate: true });

    // 分页设置
    const chapterPage = ref(1);
    const chapterPageSize = ref(5);
    const exercisePage = ref(1);
    const exercisePageSize = ref(6);

    // 分页处理
    const handleChapterPageChange = (page: number) => {
        chapterPage.value = page;
    };

    const handleExercisePageChange = (page: number) => {
        exercisePage.value = page;
    };

    // 模拟学生数据
    const studentData = {
        '1.1': {
            userName: '张三',
            UserId: '2023001',
            className: '2023级软件工程1班',
            avatar: 'https://picsum.photos/60/60?timestamp=1',
            introduce: '热爱编程，对JavaScript充满热情',
            completionRate: 85,
            averageScore: 92,
            totalTime: 45,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 60,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 95,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '1.2': {
            userName: '李四',
            UserId: '2023002',
            className: '2023级软件工程1班',
            avatar: 'https://picsum.photos/60/60?timestamp=2',
            introduce: '正在学习前端开发，希望成为一名优秀的工程师',
            completionRate: 78,
            averageScore: 88,
            totalTime: 38,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 80,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 95,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '1.3': {
            userName: '王五',
            UserId: '2023003',
            className: '2023级软件工程1班',
            avatar: 'https://picsum.photos/60/60?timestamp=3',
            introduce: '对Web开发充满热情，正在努力学习中',
            completionRate: 92,
            averageScore: 95,
            totalTime: 52,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 85,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 95,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '2.1': {
            userName: '赵六',
            UserId: '2023004',
            className: '2023级软件工程2班',
            avatar: 'https://picsum.photos/60/60?timestamp=4',
            introduce: '专注于后端开发，对数据库和服务器架构感兴趣',
            completionRate: 88,
            averageScore: 91,
            totalTime: 42,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 82,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 95,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '2.2': {
            userName: '钱七',
            UserId: '2023005',
            className: '2023级软件工程2班',
            avatar: 'https://picsum.photos/60/60?timestamp=5',
            introduce: '全栈开发爱好者，正在学习云计算技术',
            completionRate: 95,
            averageScore: 94,
            totalTime: 56,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 85,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 92,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '2.3': {
            userName: '孙八',
            UserId: '2023006',
            className: '2023级软件工程2班',
            avatar: 'https://picsum.photos/60/60?timestamp=6',
            introduce: '机器学习和人工智能爱好者，专注于算法研究',
            completionRate: 86,
            averageScore: 89,
            totalTime: 48,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 82,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 96,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '3.1': {
            userName: '周九',
            UserId: '2023007',
            className: '2023级软件工程3班',
            avatar: 'https://picsum.photos/60/60?timestamp=7',
            introduce: '移动应用开发者，热衷于创新型应用开发',
            completionRate: 91,
            averageScore: 93,
            totalTime: 50,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 86,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 94,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '3.2': {
            userName: '吴十',
            UserId: '2023008',
            className: '2023级软件工程3班',
            avatar: 'https://picsum.photos/60/60?timestamp=8',
            introduce: '游戏开发爱好者，专注于Unity3D引擎开发',
            completionRate: 83,
            averageScore: 87,
            totalTime: 44,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 75,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 90,
                    completed: 20,
                    total: 25,
                    accuracy: 88,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 75,
                    completed: 15,
                    total: 20,
                    accuracy: 80,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        },
        '3.3': {
            userName: '郑十一',
            UserId: '2023009',
            className: '2023级软件工程3班',
            avatar: 'https://picsum.photos/60/60?timestamp=9',
            introduce: '网络安全专家，致力于Web安全研究',
            completionRate: 94,
            averageScore: 96,
            totalTime: 58,
            chapterProgress: [
                {
                    id: 1,
                    name: '第一章：MySQL入门与安装配置',
                    status: 'completed',
                    statusText: '已完成',
                    progress: 100,
                    studyTime: 8,
                    lastStudyTime: '2024-03-20'
                },
                {
                    id: 2,
                    name: '第二章：数据库设计基础',
                    status: 'in-progress',
                    statusText: '学习中',
                    progress: 88,
                    studyTime: 4,
                    lastStudyTime: '2024-03-21'
                },
                // 更多章节数据...
            ],
            exerciseProgress: [
                {
                    id: 1,
                    name: '第一次作业',
                    score: 98,
                    completed: 20,
                    total: 25,
                    accuracy: 92,
                    timeSpent: 45,
                    submitTime: '2024-03-20 15:30'
                },
                {
                    id: 2,
                    name: '第二次作业',
                    score: 88,
                    completed: 15,
                    total: 20,
                    accuracy: 85,
                    timeSpent: 35,
                    submitTime: '2024-03-21 14:20'
                },
                // 更多习题数据...
            ]
        }
    };

    // 计算当前显示的学生信息
    const currentStudent = computed(() => {
        return studentData[UserId.value as keyof typeof studentData] || {
            userName: '未选择学生',
            UserId: '--',
            className: '--',
            avatar: 'https://picsum.photos/60/60',
            introduce: '请从左侧选择要查看的学生',
            completionRate: 0,
            averageScore: 0,
            totalTime: 0,
            chapterProgress: [],
            exerciseProgress: []
        };
    });

    const paginatedChapters = computed(() => {
        const start = (chapterPage.value - 1) * chapterPageSize.value;
        const end = start + chapterPageSize.value;
        return currentStudent.value.chapterProgress.slice(start, end);
    });

    const paginatedExercises = computed(() => {
        const start = (exercisePage.value - 1) * exercisePageSize.value;
        const end = start + exercisePageSize.value;
        return currentStudent.value.exerciseProgress.slice(start, end);
    });

    // 工具函数
    const getScoreLevel = (score: number) => {
        if (score >= 90) return 'score-excellent';
        if (score >= 80) return 'score-good';
        if (score >= 60) return 'score-pass';
        return 'score-fail';
    };

    const getAccuracyLevel = (accuracy: number) => {
        if (accuracy >= 90) return 'accuracy-high';
        if (accuracy >= 70) return 'accuracy-medium';
        return 'accuracy-low';
    };
</script>

<style scoped>
.CourseContentStudentView {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.studentInfoContainer {
    width: 100%;
    margin: 0 auto;
}

/* 基本信息区域 */
.basicInfo {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 32px;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e8f4ff;
    transition: all 0.3s ease;
}

.avatar:hover {
    transform: scale(1.05);
    border-color: #409EFF;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info {
    flex: 1;
}

.name {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #2c3e50;
    letter-spacing: 0.5px;
}

.introduce {
    font-size: 16px;
    color: #5a6a7e;
    margin-bottom: 24px;
    line-height: 1.6;
}

.tags {
    display: flex;
    gap: 12px;
}

.tag {
    background: #e8f4ff;
    color: #409EFF;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #409EFF;
    color: white;
}

/* 统计数据样式 */
.statistics {
    display: flex;
    justify-content: space-around;
    gap: 64px;
    margin: 32px 0;
    padding: 24px 0;
    border-top: 2px solid #eef2f7;
    border-bottom: 2px solid #eef2f7;
}

.statItem {
    text-align: center;
    flex: 0 1 auto;
    min-width: 120px;
}

.statItem .value {
    font-size: 36px;
    font-weight: 700;
    color: #409EFF;
    margin-bottom: 8px;
    line-height: 1;
}

.statItem .label {
    font-size: 15px;
    color: #5a6a7e;
    font-weight: 500;
}

/* 内容区域 */
.contentSection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 20px;
    position: relative;
}

.contentSection::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(64, 158, 255, 0.1) 0%,
        rgba(64, 158, 255, 0.6) 20%,
        rgba(64, 158, 255, 1) 50%,
        rgba(64, 158, 255, 0.6) 80%,
        rgba(64, 158, 255, 0.1) 100%
    );
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
}

.chapterSection {
    padding-right: 20px;
}

.exerciseSection {
    padding-left: 20px;
}

.section-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.sectionTitle {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.section-extra {
    color: #909399;
    font-size: 14px;
}

/* 章节和习题列表容器 */
.chapter-list,
.exercise-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

/* 统一列表项样式 */
.chapter-item,
.exercise-item {
    height: 50%;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.chapter-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(64, 158, 255, 0) 0%,
        rgba(64, 158, 255, 0.3) 20%,
        rgba(64, 158, 255, 0.5) 50%,
        rgba(64, 158, 255, 0.3) 80%,
        rgba(64, 158, 255, 0) 100%
    );
}

.exercise-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(64, 158, 255, 0) 0%,
        rgba(64, 158, 255, 0.3) 20%,
        rgba(64, 158, 255, 0.5) 50%,
        rgba(64, 158, 255, 0.3) 80%,
        rgba(64, 158, 255, 0) 100%
    );
}

.chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.chapter-name {
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
}

.chapter-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.completed {
    background: #e1f3d8;
    color: #67c23a;
}

.in-progress {
    background: #e8f4ff;
    color: #409eff;
}

.not-started {
    background: #f4f4f5;
    color: #909399;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: #ebeef5;
    border-radius: 3px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: #409eff;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    color: #606266;
    min-width: 45px;
}

.chapter-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #909399;
}

.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.exercise-name {
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
}

.exercise-score {
    font-size: 18px;
    font-weight: 600;
}

.score-excellent {
    color: #67c23a;
}

.score-good {
    color: #409eff;
}

.score-pass {
    color: #e6a23c;
}

.score-fail {
    color: #f56c6c;
}

.exercise-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
}

.accuracy-high {
    color: #67c23a;
}

.accuracy-medium {
    color: #e6a23c;
}

.accuracy-low {
    color: #f56c6c;
}

.exercise-footer {
    font-size: 12px;
    color: #909399;
    text-align: right;
}

.pagination {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

/* 分页样式 */
.pagination {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

:deep(.el-pagination) {
    --el-pagination-bg-color: transparent;
    --el-pagination-hover-color: #409eff;
    --el-pagination-button-color: #606266;
    --el-pagination-button-disabled-color: #C0C4CC;
}

:deep(.el-pagination .el-pager li) {
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    margin: 0 8px;
}

:deep(.el-pagination .el-pager li.is-active) {
    color: #409eff;
    font-weight: bold;
    position: relative;
}

:deep(.el-pagination .el-pager li.is-active::after) {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #409eff;
    border-radius: 2px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
    background: transparent;
    font-weight: bold;
    font-size: 16px;
    color: #409eff;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
    color: #66b1ff;
}

:deep(.el-pagination .btn-prev:disabled),
:deep(.el-pagination .btn-next:disabled) {
    color: #C0C4CC;
}

/* 响应式布局 */
@media screen and (max-width: 1024px) {
    .contentSection {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contentSection::after {
        display: none;
    }
    
    .chapterSection,
    .exerciseSection {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .CourseContentStudentListView {
        padding: 20px;
    }

    .basicInfo {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }
    
    .tags {
        justify-content: center;
    }
    
    .statistics {
        gap: 32px;
        padding: 16px 0;
    }
    
    .statItem {
        min-width: 100px;
    }
    
    .statItem .value {
        font-size: 28px;
    }
    
    .statItem .label {
        font-size: 14px;
    }
    
    .name {
        font-size: 28px;
    }
    
    .sectionTitle {
        font-size: 20px;
    }

    .exercise-list {
        grid-template-columns: 1fr;
    }

    .exercise-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>
